<template>
  <div class="address-list-bg">
    <div>
      <van-address-list
        v-if="addressList.length !== 0"
        v-model="chosenAddressId"
        :list="addressList"
        @edit="onEdit"
        @add="onAdd"
        @click-item="addressChange"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: "Address",
  data() {
    return {
      chosenAddressId: -1, //
      addressList: [], //
      editState: false,
      uid: {
        userid: 1,
      },
    };
  },
  created() {
    this.getShuju();
  },
  methods: {
    // 跳转到新增地址
    onAdd() {
      this.$router.push("/user/addressAdd");
    },
    // 跳转到地址编辑页面
    onEdit(info) {
      this.$router.replace({
        name: "addressedit",
        params: {
          info: info,
        },
      });
      this.editState = true;
    },
    // 点击地址列表信息
    addressChange(data) {
      //判断是否点击了编辑按钮
      if (!this.editState) {
        this.chosenAddressId = data.id;
        // this.$router.back();
      }
    },
    getShuju() {
      this.$http
        .post("http://localhost:8080/address/addres", this.uid, {
          headers: {
            "Content-Type": "application/x-www-form-urlencoded", // 或者 'multipart/form-data'
          },
        })
        .then((res) => {
          console.log(res.data);
          res.data.forEach((item, index) => {
            this.addressList.push({
              id: item.id,
              name: item.name,
              tel: item.tel,
              address: item.area + " " + item.detail,
            });
            if (item.isDefault == "1") {
              this.chosenAddressId = index + 1;
            }
          });
        });
    },
  }
};
</script>

<style scoped>
.address-list-bg {
  position: absolute;
  width: 100%;
  height: 90%;
  background: rgb(247, 250, 248);
}
.address-button {
  width: 95%;
  border-radius: 8px;
}
.address-button-confirm {
  margin-bottom: 10px;
}
</style>